import { useState, useEffect } from 'react';
import { StatusBar, 
    ToastAndroid, BackHandler, 
    Alert, FlatList, StyleSheet,
    TouchableOpacity, Text, Button, 
    View, Image, ImageBackground, 
    ScrollView 
} from 'react-native';
import { AntDesign } from '@expo/vector-icons';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

let time = 0;

const Home = ({navigation})=>{
    return <View>
        {/* View组件没有onPress事件 */}
        <Button 
            title='去详情'
            onPress={()=>navigation.navigate('detail', {id: "100"})}
        />
        <Text onPress={()=>console.log(11)}>Home</Text>
    </View>
}
const Detail = ({navigation,route})=>{
    // console.log(route);
    useEffect(()=>{
        navigation.setOptions({
            title: 'hello',
            headerBackVisible: false,
            headerLeft: ()=><AntDesign
                onPress={navigation.goBack}
                name="left" 
                size={24} 
                color="black"
            />,
        })
    },[])
    return <View>
        <Text>{route.params.id}</Text>
        <Text onPress={navigation.goBack}>Detail3</Text>
    </View>
}
const App = () => {
    return (
        <NavigationContainer>
            <Stack.Navigator
                screenOptions={{
                    headerTitleAlign: 'center',
                }}
            >
                <Stack.Screen 
                    name='home' 
                    component={Home} 
                />
                <Stack.Screen 
                    name='detail' 
                    component={Detail}
                    // options={
                    //     ({route})=>({
                    //         title: route.params.id
                    //     })
                    // }
                    // options={{
                    //     title: '新闻详情',
                    //     headerBackVisible: false,
                    //     headerTitleAlign: 'center',
                    //     headerLeft: ()=><AntDesign name="left" size={24} color="black" />,
                    //     headerRight: ()=><AntDesign name="setting" size={24} color="black" />,
                    //     headerTitle: ()=><Image style={{width: 50,height: 50}} source={require('./assets/icon.png')} />,

                    // }} 
                />
            </Stack.Navigator>
        </NavigationContainer>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f5f5f5'
    }
});

export default App;